<html>
  <head>
    {{ css_links }}

    <!-- Load javascript -->
    {% if is_dev_mode %}
      <script src="/static/externdeps.js"></script>
      <script src="/devjs"></script>
    {% else %}
      <script src="/static/compiled.js"></script>
    {% endif %}
  </header>
  <body onload="initPage()">
    <center>
      {{ header_html }}
      <div class="applicationContainer">
        <div class="esnPrizes">
          <table>
            <tr>
              <td align="center">
                <img src="/static/images/prizes/iPadTouch2.png" style="width: 160px;">
              </td>
              <td align="center"><div class="title">Prizes</div></td>
              <td align="center">
                <img src="/static/images/prizes/iPodTouch3.jpg" style="width: 160px;">
              </td>
            </tr>
            <tr><td colspan="3" height="20px"></td></tr>
            <tr>
              <td colspan="3">
                <div>
                  Prizes will be raffled off in each phase among respondents who
                  completed that phase.
                </div>
                <div style="margin-top: 20px;">
                  <table>
                    <tr>
                      <td>
                        Phase 1, 2, &amp; 3: 
                        <ul>
                          <li>(1) iPod Touch per phase (3 total)</li>
                          <li>(1) iPod Nano per phase (3 total)</li>
                          <li>(1) Floor Pizza Party per phase (3 total)</li>
                        </ul>
                      </td>
                      <td>
                        <img src="/static/images/prizes/iPodnano.jpg" style="width: 180px;">
                      </td>
                    </tr>
                  </table>
                </div>
                <div style="text-align: center; margin-top: 20px;">
                  <img src="/static/images/prizes/iPad2a.png" style="width: 650px;">
                </div>
                <div style="margin-top: 30px;">
                  All Phases:
                  <ul>
                    <li>Students receive 1 entry per phase (up to 3)</li>
                    <li>At the end of study iPad 2 will be raffled off.</li>
                  </ul>
                </div>
                <div style="text-align: center; margin-top: 45px;">
                  <img src="/static/images/prizes/iPad2aa.png" style="width: 650px;">
                </div>
                <div style="margin-top: -5px; margin-bottom: 50px;">
                  All students who complete at least one phase will receive a
                  visual representation of their social network (see below).
                </div>
                <div style="text-align: center;">
                  <img src="/static/images/prizes/networkReport.png" style="width: 700px;">
                </div>
              </td>
            </tr>
          </table>
          <div class="buttonContainer">
            <div id="backButton">&laquo; Back to Survey</div>
          </div>
        </div>
      </div>
      {{ footer_html }}
    </center>

    <!-- Javascript to initialize page -->
    <script>
      function initPage() {
        var backButton = new goog.ui.CustomButton();
        backButton.decorate(document.getElementById('backButton'));

        goog.events.listenOnce(
            backButton,
            goog.ui.Component.EventType.ACTION,
            function(e) {
              document.location.href = '/';
            });
      }
    </script>
  </body>
</html>
